<template>
    <div class="menu-container">
        <!-- 非图标菜单 -->
        <div class="not-iconmenu" v-if="!iconMenu">
            <Menu ref="menu" class="main-menu" width="247px" :active-name="activeName" :open-names="[openName]" accordion theme="dark" @on-select="onSelect">
                <div v-for="(item, index) in menuArray" :key="index">
                    <i-submenu v-if="item.children" :name="item.name">
                        <template slot="title">
                            <i :class="['iconfont', item.iconClass]"></i>
                            {{item.title}}
                        </template>
                        <i-menu-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :name="cItem.name">{{cItem.title}}</i-menu-item>
                    </i-submenu>
                    <i-menu-item class="not-child" v-else :name="item.name">
                        <i :class="['iconfont', item.iconClass]"></i>
                        {{item.title}}
                    </i-menu-item>
                </div>
            </Menu>
        </div>

        <!-- 图标菜单 -->
        <div v-show="iconMenu" class="iconmenu-list">
            <div v-for="(item, index) in menuArray" :key="index"
                :class="['iconmenu-item', {'active': item.name === activeName || item.name === openName}]"
                @click.prevent.stop="onSelect(item.name)">
                <i :class="['iconfont', item.iconClass]"></i>
                <div class="iconmenu-childlist" v-if="item.children">
                    <div v-for="(cItem, cIndex) in item.children" :key="cIndex" 
                        :class="['iconmenu-childitem', {'active': activeName === cItem.name}]"
                        @click.prevent.stop="onSelect(cItem.name)">
                        {{cItem.title}}
                    </div>
                </div>
            </div>
        </div>

        <!-- 常用工具 -->
        <div class="tools-container">
            <div :class="['title', {'not-iconmenu': iconMenu}]">常用工具</div>
            <div class="tools-list">
                <a :class="['tools-item', {'is-iconmenu': iconMenu}]" href="http://saas.xiulianzone.com/" target="_blank">
                    <i class="iconfont icon-SaaS"></i>
                    <span v-show="!iconMenu">维修管理SASS系统</span>
                </a>
            </div>
        </div>

    </div>
</template>

<script>
    import bus from 'commons/js/bus';
    export default {
        props: {
            guidanceName: {     //所引导的菜单name 与路由name相同
                type: String,
                default: '/index'
            },
            iconMenu: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                timer: '',
                openName: '',       //激活的菜单
                activeName: '',     //选中的子菜单
                menuArray: [
                    {
                        title: '首页',
                        path: "/index",
                        iconClass: 'icon-shouye',
                        name: "0-0",
                    },
                    {
                        title: '健康档案上传',
                        iconClass: 'icon-shangchuan',
                        name: '1',
                        children: [
                            {
                                title: '新增结算单',
                                path: "/addStatement",
                                name: "1-0",
                            },
                            {
                                title: '上传非标准结算单',
                                path: "/uploadStatement",
                                name: "1-1",
                            }
                        ]
                    },
                    {
                        title: '健康档案查询',
                        iconClass: 'icon-chaxun',
                        name: '2',
                        children: [
                            {
                                title: '健康档案查询',
                                path: "/queryStatement",
                                name: "2-0",
                            }
                        ]
                    },
                    {
                        title: '投诉信息管理',
                        path: "/complainMessage",
                        iconClass: 'icon-tousu',
                        name: '3-0'
                    },
                    {
                        title: '评价信息管理',
                        path: "/evaluateMessage",
                        iconClass: 'icon-pinglun',
                        name: '4-0'
                    },
                    {
                        title: '统计与分析',
                        name: '5',
                        iconClass: 'icon-tongji',
                        children: [
                            {
                                title: '维修统计',
                                path: "/maintainStatistics",
                                name: '5-0'
                            },
                            {
                                title: '评价统计',
                                path: "/evaluateStatistics",
                                name: '5-1'
                            }
                        ]
                    },
                    {
                        title: '门店业务管理',
                        iconClass: 'icon-mendian',
                        name: '6',
                        children: [
                            {
                                title: "门店基本信息",
                                path: 'storeInformation',
                                name: '6-0'
                            }
                        ]
                    },
                    // {
                    //     title: '维修管理SASS系统',
                    //     iconClass: 'icon-yanzhengma',
                    //     href: "http://saas.xiulianzone.com/",
                    //     name: '7'
                    // },
                ]
            };
        },
        created(){
            this.init();
            // bus.$on('update-active', this.updateActiveName);
            // bus.$on('update-opened', this.updateOpened);
        },
        watch: {
            iconMenu(){ //菜单宽度改变的时候需要设置一次激活的菜单
                this.init();
            },
            $route(){   //路由改变的时候需要设置一次激活的菜单
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.init();
                    this.$emit('on-select');
                }, 100)
            }
        },
        methods: {
            init(){
                //设置默认选择的子菜单 1-0
                this.activeName = this.getRouter;   
                //设置默认打开一组菜单 如： 1-2 得到的是 1
                this.openName = this.activeName.split('-')[0];  
                this.$nextTick(()=>{
                    this.$refs.menu.updateOpened();//手动展开选中菜单
                })
                // 不在icon菜单状态下 点击的菜单没有子菜单的时候 关闭已经打开的菜单
                if(!this.iconMenu && !this.menuArray[this.openName].children){
                    // this.$refs.menu.$children[oldOpenName].opened = false;
                    this.$nextTick(()=>{
                        this.$refs.menu.$children.forEach( (item, index) => {
                            if(item.opened) item.opened = false;
                        })
                        // this.$refs.menu.updateOpened();
                    });
                    // this.$nextTick(()=>{
                    //     this.$refs.menu.updateActiveName();
                    //     this.$refs.menu.updateOpened();
                    // });
                }
            },
            // 打开或关闭侧边栏
            closeSider(){   
                this.$refs.sider.toggleCollapse();
            },
            /**
             * 路由跳转
             * @param name 1-1
             */
            onSelect(name) {   
                //先获取到最外面那一层对象
                let item = this.menuArray[name.split('-')[0]];  
                let path = '';

                // 获取路由路径
                path = item.children ? (name.indexOf('-') === -1 ? item.children[0].path : item.children[name.split('-')[1]].path) : item.path;

                if(path === this.$route.path) return;
                
                path && this.$router.push(path);
            },
            // 打开指定菜单
            openMenu(name){
                this.$nextTick(()=>{
                    this.$refs.menu.$children[name].opened = true;
                });
            }
        },
        computed: {
            /* 返回当前路由的名称 */
            getRouter() {
                return this.$route.meta.selectMenu;
            }
        }
    };
</script>

<style lang="less">
    .menu-container{
        .not-iconmenu{
            overflow-x: hidden;
        }

        .main-menu{
            position: static;
            &.ivu-menu{
                .ivu-menu-item.ivu-menu-item-active.ivu-menu-item-selected.not-child{
                    background: @color-Primary;
                    color: white;
                }
            }
        }

        .iconmenu-list{
            .iconmenu-item{
                cursor: pointer;
                position: relative;
                text-align: center;
                height: 50px;
                transition: all linear 0.2s;
                line-height: 50px;
                color: rgba(187, 190, 196, 1);
                .iconfont{
                    color: inherit;
                    font-size: 18px;
                }

                &:hover{
                    background: rgb(64, 69, 83);
                    color: white;
                    .iconmenu-childlist{
                        display: block;
                    }
                }

                &.active{
                    background: @color-Dark-Primary!important;
                    color: white;
                }

                .iconmenu-childlist{
                    display: none;
                    position: absolute;
                    text-align: left;
                    left: 100%;
                    z-index: 100;
                    top: 0;
                    width: 180px;
                    background: #495060;
                    color: rgba(187, 190, 196, 1);
                    .iconmenu-childitem{
                        cursor: pointer;
                        line-height: 50px;
                        padding: 0 25px;
                        height: 50px;
                        transition: all linear 0.2s;
                        &:hover{
                            background: rgb(64, 69, 83);
                            color: white;
                        }
                        &.active{
                            background: @color-Dark-Primary!important;
                            color: white;
                        }
                    }
                }
            }
        }

        .tools-container{
            border-top: 1px solid rgba(200,200,200,.1);
            .title{
                height: 32px;
                line-height: 17px;
                color: #bbbec4;
                transition: all linear 0.1s;
                font-size: 12px;
                padding: 15px 24px 0;
                overflow: hidden;
                &.not-iconmenu{
                    height: 0;
                    padding: 0 24px;
                }
            }
            .tools-list{
                width: 247px;
                overflow: hidden;
                
                .tools-item{
                    cursor: pointer;
                    position: relative;
                    display: block;
                    transition: all .1s ease-in-out;
                    padding: 0 24px;
                    font-size: 14px;
                    height: 50px;
                    line-height: 50px;
                    color: rgba(255,255,255,.7);
                    .iconfont{
                        color: inherit;
                        margin-right: 6px;
                        font-size: 16px;
                    }
                    &:hover{
                        color: white;
                    }
                    &.is-iconmenu{
                        padding-left: 22px;
                    }
                }
            }
        }
    }
</style>
